import 'dart:ui';

import 'package:cotton_candy/components/chat_list.dart';
import 'package:cotton_candy/components/bottom_tab_bar.dart';
import 'package:cotton_candy/components/gradient_container.dart';
import 'package:cotton_candy/notifier/tab_notifier.dart';
import 'package:cotton_candy/notifier/theme_notifier.dart';
import 'package:cotton_candy/notifier/user_notifier.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State {
  final scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    //亮色状态栏
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    final int tabIndex = context.watch<TabNotifier>().page;
    final ThemeNotifier themeNotifier = context.watch();
    return Scaffold(
      key: scaffoldKey,
      drawerScrimColor: Color(0),
      drawer: _Drawer(),
      resizeToAvoidBottomPadding: false,
      body: Container(
        decoration: BoxDecoration(
          color: themeNotifier.primaryColor,
        ),
        padding: EdgeInsets.only(top: 40),
        child: Column(
          children: [
            _TitleBar(
              onClick: () {
                scaffoldKey.currentState.openDrawer();
              },
            ),
            Expanded(
              child: Stack(
                children: [
                  GradientContainer(
                    child: tabIndex == 0
                        ? ChatList()
                        : tabIndex == 1
                            ? Text('people list')
                            : Text('i don\'t know too;'),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: BottomTabBar(),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class _TitleBar extends StatelessWidget {
  final Function onClick;
  _TitleBar({@required this.onClick});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20, 10, 6, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Container(
                margin: EdgeInsets.only(right: 10),
                child: GestureDetector(
                  onTap: onClick,
                  child: ClipOval(
                    child: Container(
                      width: 30,
                      height: 30,
                      color: Color.fromARGB(200, 255, 255, 255),
                    ),
                  ),
                ),
              ),
              Text(
                "Nekv jjj",
                style: TextStyle(
                    fontSize: 18,
                    color: Colors.white70,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
          IconButton(
            icon: Icon(
              CupertinoIcons.add_circled,
              color: Colors.white70,
            ),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}

class _Drawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _DrawerContainer(
      child: Column(
        children: [
          CupertinoButton(
            onPressed: () {
              context.read<UserNotifier>().logout();
            },
            color: Colors.red[300],
            child: Container(
              width: double.infinity,
              alignment: Alignment.center,
              child: Text('退出登录'),
            ),
          )
        ],
      ),
    );
  }
}

class _DrawerContainer extends StatelessWidget {
  _DrawerContainer({this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Color.fromARGB(255, 0, 0, 0),
                    offset: Offset(6, 0),
                    blurRadius: 10,
                  )
                ],
              ),
              width: 1,
            ),
          ),
          ClipRRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
              child: Container(
                color: Color.fromARGB(150, 255, 255, 255),
                width: double.infinity,
                height: double.infinity,
                padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: SafeArea(
                  child: child,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
